<template>
	<div class="container" >
		<div class="top-wrapper" @click="linkAddress">
			<div class="selected-wrapper" v-if="isVirtual">
				<div class="title-wrapper">
					<img
						class="icon"
						src="../../assets/images/e5_address@2x.png"
					/>
					<label class="title">{{ item.name }}</label>
					<label class="title">{{ item.tel }}</label>
					<!-- <label class="default">默认</label> -->
				</div>
				<label class="desc address-text" style="-webkit-box-orient:vertical">{{
					item.address
				}}</label>
			</div>
			<div class="unselected-wrapper" v-else>
				<label class="desc">您还没有关联客户，点击这里添加。</label>
			</div>
			<img
				class="indicator"
				src="../../assets/images/enter@2x.png"
			/>
		</div>
		<img
			class="line-wrapper"
			src="../../assets/images/bg_address_line@2x.png"
		/>
	</div>
</template>

<script>
export default {
	props: {
		item: {
			type: Object
		}
		,isVirtual:{
			type:Boolean
		}
	},
	methods:{
		linkAddress(){
			this.$router.push({ name: "addressList",query:{type:"choose"}});
		}
	}
}
</script>

<style lang="less" scoped>
.container {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
	background-color: #fff;
}
.top-wrapper {
	flex: 1;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	background-color: #fff;
	padding: .2rem 0;
}
.selected-wrapper {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
}
.title-wrapper {
	height: 20px;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}
.icon {
	width: 16px;
	height: 16px;
	margin-left: 10px;
}
.title {
	font-size: 16px;
	color: #4e545d;
	margin-left: 10px;
}
.default {
	width: 28px;
	margin-left: 10px;
	margin-right: 10px;
	border: 1px solid #e93b3d;
	color: #e93b3d;
	font-size: 10px;
	text-align: center;
	border-radius: 2px;
}
.desc {
	color: #7c7f88;
	font-size: 14px;
}
.address-text {
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 36px;
	@include limit-line(2);
}
.unselected-wrapper {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.indicator {
	width: 7px;
	height: 12px;
	margin-left: 10px;
	margin-right: 10px;
}
.line-wrapper {
	// position: relative;
	left: 0px;
	right: 0px;
	bottom: 0px;
	width: 100%;
	height: 2px;
}
</style>
